import { useSexDictsModel } from "@/models/dicts";
import {
  getCustomerDetail,
  getCustomerOpportunities,
} from "@/services/customer";
import { formatData } from "@/utils";
import {
  Col,
  Descriptions,
  Divider,
  Modal,
  Row,
  Spin,
  Table,
  Tabs,
} from "antd";
import { useEffect, useState } from "react";
import { MyModalProps } from "types/modal";
import {
  ageGroupOptions,
  customerSourceOptions,
  maritalStatusOptions,
} from "./const";
type Props = {
  userId: number;
  customerList: any[];
} & MyModalProps;
const App = (props: Props) => {
  const { onClose = () => {}, customerList = [], userId } = props;
  const [data, setData] = useState<any>({});
  const { statusOptions } = useSexDictsModel();
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const getData = async () => {
    setLoading(true);
    const { data } = await getCustomerDetail(userId);
    const { data: opportunities } = await getCustomerOpportunities(userId);
    setDataSource(opportunities || []);
    console.log("opportunities", opportunities);
    setData(data || {});
    setLoading(false);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <Modal
      title="客户详情"
      width={600}
      open
      cancelButtonProps={{
        style: {
          display: "none",
        },
      }}
      okText="关闭"
      onOk={() => {
        onClose();
      }}
      onCancel={() => {
        onClose();
      }}
    >
      <Tabs
        items={[
          {
            label: "详细信息",
            key: "1",
            children: (
              <Spin spinning={loading}>
                <Row>
                  <Col>
                    <Descriptions
                      labelStyle={{ width: 80 }}
                      column={2}
                      items={[
                        {
                          label: "姓名",
                          children: formatData(data.customerName),
                        },
                        {
                          label: "联系方式",
                          children: formatData(data.customerPhone),
                        },
                        {
                          label: "性别",
                          children: formatData(
                            statusOptions.find(
                              (item) => Number(item.value) === data.sex
                            )?.label
                          ),
                        },
                        //年龄段
                        {
                          label: "年龄段",
                          children: formatData(
                            ageGroupOptions.find(
                              (item) => item.value === data.ageGroup
                            )?.label
                          ),
                        },
                        //婚姻状况
                        {
                          label: "婚姻状况",
                          children: formatData(
                            maritalStatusOptions.find(
                              (item) => item.value === data.maritalStatus
                            )?.label
                          ),
                        },
                        //子女状况
                        {
                          label: "子女状况",
                          children: formatData(data.childrenStatus),
                        },
                        //客户来源 customerSourceOptions
                        {
                          label: "客户来源",
                          children: formatData(
                            customerSourceOptions.find(
                              (item) => item.value === data.customerSource
                            )?.label
                          ),
                        },
                      ]}
                    />
                  </Col>
                  <Col span={24}>
                    {/* 分隔线 */}
                    <Divider />
                  </Col>
                  <Col span={24}>
                    <Descriptions
                      labelStyle={{ width: 80 }}
                      column={2}
                      items={[
                        {
                          label: "防重名",
                          children: formatData(data.duplicateName),
                        },
                        // 单位
                        {
                          label: "单位",
                          children: formatData(data.customerUnit),
                        },
                        // 微信号
                        {
                          label: "微信号",
                          children: formatData(data.customerWechat),
                        },

                        // 备注
                        {
                          label: "备注",
                          children: formatData(data.customerRemark),
                        },
                      ]}
                    />
                  </Col>
                </Row>
              </Spin>
            ),
          },
          {
            label: "关联项目",
            key: "2",
            children: (
              <>
                <Table
                  pagination={false}
                  dataSource={dataSource}
                  size="small"
                  columns={[
                    {
                      title: "项目名称",
                    },
                    {
                      title: "角色",
                      dataIndex: "role",
                      render: (_: any, r) => {
                        return customerList?.map((item, index) => {
                          return `${index ? "、" : ""}${
                            item.associationText || "--"
                          }`;
                        });
                      },
                    },
                  ]}
                />
              </>
            ),
          },
        ]}
      />
    </Modal>
  );
};
export default App;
